<template>
	<div id="temp">
		<div class="stuInfo">
			<div class="tit">
				<span>酒店详情</span>
				<span class="icon" @click="hotelEdit"></span>
			</div>
			<el-row>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">酒店编号：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.code}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">合同号：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.numb}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">联系人：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.contact}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">地址：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.address}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">名称：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.name}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">开始合作时间：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.startdate}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">联系电话：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.phone}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">星级：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.star}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">合同到期日：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.enddate}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">邮箱：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.email}}</span>
						</el-col>
					</div>
				</el-col>
			</el-row>
		</div>
    <el-dialog title="编辑酒店" :visible.sync="pop" size="tiny">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="酒店编号" prop="code" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.code" size="small" placeholder="请输入酒店编号"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="名称" prop="name" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.name" size="small" placeholder="请输入名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="星级" prop="star" :label-width="width" class="sel">
          <el-select v-model="form.star" placeholder="请选择" size="small">
            <el-option label="一星" value="一星"></el-option>
            <el-option label="二星" value="二星"></el-option>
            <el-option label="三星" value="三星"></el-option>
            <el-option label="四星" value="四星"></el-option>
            <el-option label="五星" value="五星"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同号" prop="numb" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.numb" size="small" placeholder="请输入合同号"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开始合作时间" prop="startdate" :label-width="width">
          <el-col :span="span">
            <el-date-picker type="date" size="small" placeholder="选择日期" v-model="form.startdate"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.contact" size="small" placeholder="请输入联系人"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.phone" size="small" placeholder="请输入联系电话"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.email" size="small" placeholder="请输入邮箱"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="address" :label-width="width">
          <el-col :span="span">
            <el-input v-model="form.address" size="small" placeholder="请输入地址"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="合同到期日" prop="enddate" :label-width="width">
          <el-col :span="span">
            <el-date-picker type="date" size="small" placeholder="选择日期" v-model="form.enddate"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pop = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
		<div class="record">
			<el-tabs type="border-card"  @tab-click="tabChange" active-name="hotelRoom">
				<el-tab-pane label="房型" name="hotelRoom">
					<table class="tab-table">
						<thead>
							<tr>
								<th>
									<span class="icon add" @click="openAddRoom"></span>
								</th>
								<th>房型</th>
								<th>价格</th>
								<th>是否含早</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in list">
								<td>
									<span class="icon edit" @click="editRoom(item.id)"></span>
									<span class="icon del" @click="delRoom(item.id)"></span>
								</td>
								<td>{{item.type}}</td>
								<td>{{item.price}}</td>
								<td>{{item.breakfast}}</td>
							</tr>

						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="会议" name="hotelMeeting">
					<table class="tab-table">
						<thead>
							<tr>
								<th>
									<span class="icon add"@click="openAddMeeting"></span>
								</th>
								<th>项目</th>
								<th>价格</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in list" :key="item.id">
								<td>
									<span class="icon edit" @click="editMeeting(item.id)"></span>
									<span class="icon del" @click="delMeeting(item.id)"></span>
								</td>
								<td>{{item.project}}</td>
								<td>{{item.price}}</td>
								<td>{{item.note}}</td>
							</tr>

						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="合同存档" name="hotelContract">
          <table class="tab-table">
            <thead>
            <tr>
              <th>
                <el-upload :action="action" :data="{id: id}" :on-success="uploadSuccess"
                           :on-progress="uploading" :show-file-list="false">
                  <span class="icon add"></span>
                </el-upload>
              </th>
              <th>合同名称</th>
              <th>上传时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>
                <span class="icon del" @click="delContract(item.id)"></span>
              </td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td class="download" @click="downloadContract(item.id)">下载</td>
            </tr>
            </tbody>
          </table>
				</el-tab-pane>
				<el-tab-pane label="供方评定记录" name="hotelAssess">
          <table class="tab-table">
            <thead>
            <tr>
              <th>
                <span class="icon add" @click="openAddAssess"></span>
              </th>
              <th>评定结果</th>
              <th>评定时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in list">
              <td>
                <span class="icon edit" @click="editAssess(item.id)"></span>
                <span class="icon del" @click="delAssess(item.id)"></span>
              </td>
              <td>{{item.result}}</td>
              <td>{{item.time}}</td>
            </tr>
            </tbody>
          </table>
				</el-tab-pane>
        <el-tab-pane label="酒店账单" name="hotelBill">
          <div class="el-tab-pane-head">
            <el-date-picker size="small" v-model="time" type="daterange" placeholder="请选择时间" @change="handleChange"
          style="margin: 15px 20px;"></el-date-picker>
            <el-button type="primary" @click="downloadBill">导出</el-button>
          </div>
          
          <table class="tab-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>职务</th>
                <th>船东</th>
                <th width="200">培训课程</th>
                <th>培训日期</th>
                <th>住宿标准</th>
                <th>入住天数</th>
                <th>住宿总额</th>
                <th>INV No.</th>
                <th>已回款</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{index+1}}</td>
                <td>{{item.name||item.ename}}</td>
                <td>{{item.zhiwu}}</td>
                <td>{{item.chuandong}}</td>
                <td>{{item.course}}</td>
                <td>{{item.date}}</td>
                <td>{{item.hotel}}</td>
                <td>{{item.days}}</td>
                <td>{{item.hotel_money}}</td>
                <td>{{item.inv}}</td>
                <td>{{item.paid_total}}</td>
              </tr>
              <tr>
                <td colspan="2">合计</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>{{bill_hotel_total}}</td>
                <td></td>
                <td>{{bill_paid_total}}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
			</el-tabs>
		</div>
    <el-dialog title="添加房型" :visible.sync="roomPop" size="tiny">
      <el-form :model="roomType" :rules="roomRules" ref="roomForm">
        <el-form-item label="房型" :label-width="width" prop="type">
          <el-col :span="span">
            <el-input v-model="roomType.type" size="small" placeholder="请输入房型"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="价格" :label-width="width" prop="price">
          <el-col :span="span">
            <el-input v-model="roomType.price" size="small" placeholder="请输入价格"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否含早" :label-width="width" prop="breakfast">
          <el-radio-group v-model="roomType.breakfast">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roomPop = false">取 消</el-button>
        <el-button type="primary" @click="roomSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加会议" :visible.sync="meetingPop" size="tiny">
      <el-form :model="meeting" :rules="meetingRules" ref="meetingForm">
        <el-form-item label="项目" :label-width="width" prop="project">
          <el-col :span="span">
            <el-input v-model="meeting.project" size="small" placeholder="请输入项目"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="价格" :label-width="width" prop="price">
          <el-col :span="span">
            <el-input v-model="meeting.price" size="small" placeholder="请输入价格"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" :label-width="width" prop="note">
          <el-col :span="span">
            <el-input type="textarea" :rows="3" v-model="meeting.note" placeholder="备注"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="meetingPop = false">取 消</el-button>
        <el-button type="primary" @click="meetingSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加酒店评定结果" :visible.sync="assessPop" size="tiny">
      <el-form :model="assess" :rules="assessRules" ref="assessForm">
        <el-form-item label="评定结果" :label-width="width" prop="result">
          <el-col :span="span">
            <el-radio-group v-model="assess.result">
              <el-radio label="通过">通过</el-radio>
              <el-radio label="不通过">不通过</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="评定日期" :label-width="width" prop="project">
          <el-col :span="span">
            <el-date-picker v-model="assess.time" type="date" >
            </el-date-picker>
          </el-col>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assessPop = false">取 消</el-button>
        <el-button type="primary" @click="assessSubmit">确 定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
const roomType = {
  id: "",
  type: "",
  price: "",
  breakfast: ""
};
const meeting = {
  id: "",
  project: "",
  price: "",
  note: ""
};
const assess = {
  id: "",
  result: "",
  time: ""
};
export default {
  data() {
    return {
      time: [],
      bill_hotel_total: 0,
      bill_paid_total: 0,
      id: "",
      info: {},
      width: "120px",
      span: 18,
      pop: false,
      rules: {
        code: [{ required: true, message: "请填写酒店编号", trigger: "blur" }],
        name: [{ required: true, message: "请填写酒店名称", trigger: "blur" }]
      },
      list: [],
      roomPop: false,
      meetingPop: false,
      roomType: _g.cloneJson(roomType),
      roomRules: {
        type: [
          { required: true, message: "请填写酒店房间类型", trigger: "blur" }
        ]
      },
      meeting: _g.cloneJson(meeting),
      meetingRules: {
        project: [
          { required: true, message: "请填写项目名称", trigger: "blur" }
        ]
      },
      form: {},
      action: PATH + "Operation/hotelContractEdit",
      assessPop: false,
      assess: _g.cloneJson(assess),
      assessRules: {
        result: [
          { required: true, message: "请填写评定结果", trigger: "change" }
        ]
      }
    };
  },

  created() {
    this.id = this.$route.params.id;
    this.fetchData();
    this.getRoomList();
  },

  methods: {
    fetchData() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/hotelDetail", data).then(res => {
        this.info = res;
        this.form = _g.cloneJson(res);
      });
    },
    hotelEdit() {
      this.pop = true;
      this.form = _g.cloneJson(this.info);
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.pop = false;
          this.apiPost("Operation/hotelEdit", this.form).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.fetchData();
            } else {
              this.pop = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    tabChange(tab) {
      
      if (tab.name == "hotelBill") {
        this.getBillList()
      }else{
        let data = {
          id: this.id
        };
        this.apiPost("Operation/" + tab.name, data).then(res => {
          this.list = res;
        });
      }
      
    },
    openAddRoom() {
      this.roomPop = true;
      setTimeout(() => {
        this.$refs.roomForm.resetFields();
        this.roomType = _g.cloneJson(roomType);
      }, 0);
    },

    getRoomList() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/hotelRoom", data).then(res => {
        this.list = res;
      });
    },
    roomSubmit() {
      this.$refs.roomForm.validate(valid => {
        if (valid) {
          this.roomPop = false;
          this.roomType.hotelid = this.id;
          this.apiPost("Operation/hotelRoomEdit", this.roomType).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getRoomList();
            } else {
              this.roomPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editRoom(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/hotelRoomDetail", data).then(res => {
        this.roomPop = true;
        setTimeout(() => {
          this.$refs.roomForm.resetFields();
          this.roomType = res;
        }, 0);
      });
    },
    delRoom(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/hotelRoomDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getRoomList();
            }
          });
        })
        .catch(() => {});
    },

    openAddMeeting() {
      this.meetingPop = true;
      setTimeout(() => {
        this.$refs.meetingForm.resetFields();
        this.meeting = _g.cloneJson(meeting);
      }, 0);
    },
    getMeetingList() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/hotelMeeting", data).then(res => {
        this.list = res;
      });
    },
    meetingSubmit() {
      this.$refs.meetingForm.validate(valid => {
        if (valid) {
          this.meetingPop = false;
          this.meeting.hotelid = this.id;
          this.apiPost("Operation/hotelMeetingEdit", this.meeting).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getMeetingList();
            } else {
              this.meetingPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editMeeting(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/hotelMeetingDetail", data).then(res => {
        this.meetingPop = true;
        setTimeout(() => {
          this.$refs.meetingForm.resetFields();
          this.meeting = res;
        }, 0);
      });
    },
    delMeeting(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/hotelMeetingDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getMeetingList();
            }
          });
        })
        .catch(() => {});
    },

    getContractList() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/hotelContract", data).then(res => {
        this.list = res;
      });
    },
    uploading() {
      _g.openGlobalLoading();
    },
    uploadSuccess(res) {
      _g.closeGlobalLoading();
      let remind = res.error ? "error" : "success";
      _g.toastMsg(remind, res.msg);
      if (!res.error) {
        this.getContractList();
      }
    },
    delContract(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/hotelContractDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getContractList();
            }
          });
        })
        .catch(() => {});
    },
    downloadContract(id) {
      window.location.href = PATH + "Operation/hotelContractDownload/id/" + id;
    },

    getAssessList() {
      let data = {
        id: this.id
      };
      this.apiPost("Operation/hotelAssess", data).then(res => {
        this.list = res;
      });
    },
    openAddAssess() {
      this.assessPop = true;
      setTimeout(() => {
        this.$refs.assessForm.resetFields();
        this.assess = _g.cloneJson(assess);
      }, 0);
    },
    assessSubmit() {
      this.$refs.assessForm.validate(valid => {
        if (valid) {
          this.assessPop = false;
          this.assess.hotelid = this.id;
          this.apiPost("Operation/hotelAssessEdit", this.assess).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getAssessList();
            } else {
              this.assessPop = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editAssess(id) {
      let data = {
        id: id
      };
      this.apiPost("Operation/hotelAssessDetail", data).then(res => {
        this.assessPop = true;
        setTimeout(() => {
          this.$refs.assessForm.resetFields();
          this.assess = res;
        }, 0);
      });
    },
    delAssess(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Operation/hotelAssessDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.getAssessList();
            }
          });
        })
        .catch(() => {});
    },
    getBillList() {
      let data = {
        id: this.id,
        time: this.time
      };
      this.apiPost("Operation/hotelBill", data).then(res => {
        this.bill_hotel_total = 0
        this.bill_paid_total = 0
        res.forEach(item=>{
          this.bill_hotel_total += parseFloat(item.hotel_money)||0
          this.bill_paid_total += parseFloat(item.paid_money)||0
        })
        this.list = res;
      });
    },
    handleChange() {
      let data = {
        id: this.id,
        time: this.time
      };
      this.getBillList();
    },
    //客户账单导出
    downloadBill() {
      if(!this.list.length){
        return false
      }
      let res = this.list;
      res.forEach((item, index) => {
        item.index = index + 1;
        item.name = item.name || item.ename;
      });
      let data = {
        index: "合计",
        hotel_money: this.bill_hotel_total,
        paid_total: this.bill_paid_total
      };
      res.push(data);
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        const tHeader = [
          "序号",
          "姓名",
          "职务",
          "船东",
          "培训课程",
          "培训日期",
          "住宿标准",
          "入住天数",
          "住宿总额",
          "INV No.",
          "已回款"
        ];
        const filterVal = [
          "index",
          "name",
          "zhiwu",
          "chuandong",
          "course",
          "date",
          "hotel",
          "days",
          "hotel_money",
          "inv",
          "paid_total"
        ];
        const data = this.formatJson(filterVal, this.list);
        export_json_to_excel(tHeader, data, "酒店账单");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
  }
};
</script>

<style scoped>
.stuInfo .headPic {
  padding: 0;
}

.stuInfo .headPic img {
  width: 80%;
}

.add {
  width: 25px;
  height: 25px;
  background: url(../../../img/add.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.warpper {
  padding-top: 20px;
}

.sel {
  text-align: left;
}
.download {
  color: #009eff;
  cursor: pointer;
}
.download:hover {
  color: #fff;
}
</style>
